<template>
<div style="width:100%;">
  <div class="header">
      <el-menu background-color="#eee" text-color="#303133" class="el-menu-demo" mode="horizontal" router>
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item>店铺列表</el-menu-item>
        <el-menu-item>店铺信息</el-menu-item>
      </el-menu>
  </div>
  <div style="margin:20px">
    <el-button style="margin:10px 0px" @click="$router.back()" size="mini">返回店铺列表</el-button>
    <el-card>
      <el-form>
        <el-form size="mini" ref="form" :model="storeInfo" label-width="80px">
          <el-form-item label="店铺名称">
            <el-input v-model="storeInfo.name"></el-input>
          </el-form-item>
          <el-form-item label="店铺编号">
            <el-input v-model="storeInfo.num"></el-input>
          </el-form-item>
          <el-form-item label="店铺id">
            <el-input v-model="storeInfo.id"></el-input>
          </el-form-item>
          <el-form-item label="店铺电话">
            <el-input v-model="storeInfo.mobile"></el-input>
          </el-form-item>
          <el-form-item label="店铺权限">
            <el-select v-model="storeInfo.rights" placeholder="请选择活动区域">
            <el-option label="一级" :value="1"></el-option>
            <el-option label="二级" :value="2"></el-option>
            <el-option label="三级" :value="3"></el-option>
            <el-option label="无权限" :value="0"></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="店铺行业">
            <el-select v-model="storeInfo.industry" placeholder="请选择活动区域">
            <el-option v-for="item in industryList" :label="item.tradeName" :value="item.tradeName" :key="item.id"></el-option>
          </el-select>
          </el-form-item>
          <!-- 百度地图 （可能会做 -->
          <el-form-item label="备注">
            <el-input  type="textarea" v-model="storeInfo.remarks"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">确认修改</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-form>
    </el-card>
  </div>
</div>
</template>
<script>
export default {
  name: 'storeEdit',
  props: {
    storeid: {
      type: [Number, String],
      required: true
    }
  },
  data () {
    return {
      storeInfo: {},
      industryList: []
    }
  },
  created () {
    this.getStoreInfo(this.storeid)
    this.getIndustryList()
  },
  methods: {
    async getStoreInfo (id) {
      const data = await this.$http.get(`/stores?id=${id}`)
      if (data.status === 200) {
        this.$message.success('获取数据成功')
      }
      this.storeInfo = data.data[0]
    },
    resetForm () {
      this.getStoreInfo(this.storeid)
    },
    async getIndustryList () {
      const data = await this.$http.get('/xtableDatas')
      this.industryList = data.data
    },
    async submitForm () {
      const data = await this.$http.put(`/stores/${this.storeid}`, this.storeInfo)
      if (data.status === 200) {
        this.$message.success('修改成功')
      }
    }
  }
}
</script>
<style lang='less' scoped>
.el-card{
  width: 100%;
  min-width: 1000px;
}
</style>
